<template>
  <div class="home_game_gap">
    <AllGame
      v-show="activeGameType.title === lang.game_type_1"
      :class="{ 'fade-in': activeGameType.title === lang.game_type_1 }"
      :gameTypeList="props.gameTypeList"
      @changeGameType="emits('changeGameType', $event)"
    />
    <GameLoading
      v-show="showGameLoading"
      class="game_loading"
      :class="{ 'fade-in': aniGameLoading }"
      :loadingGamesInfo="loadingGamesInfo"
      @addMore="addMore"
    />
  </div>
</template>

<script setup lang="ts">
import AllGame from "./AllGame.vue";
import GameLoading from "./GameLoading.vue";
import { getGameList } from "./const";

const lang: any = getCurrentPageLang("home");

const props = defineProps({
  gameTypeList: {
    type: Array as any,
    default: () => [],
  },
  activeGameType: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["changeGameType"]);

const showGameLoading = ref(false);
const aniGameLoading = ref(false);
watch(
  () => props.activeGameType,
  async () => {
    if (props.activeGameType.title === lang.game_type_1) {
      showGameLoading.value = false;
      return;
    }
    showGameLoading.value = true;
    aniGameLoading.value = false;
    setTimeout(() => {
      aniGameLoading.value = true;
    }, 0);
  }
);

const loadingGamesInfo: any = ref({
  list: [],
  percent: 0,
  total: 0,
  loading: false,
});

async function initLoadingGames() {
  if (props.activeGameType.resInfo) {
    return (loadingGamesInfo.value = JSON.parse(
      JSON.stringify(props.activeGameType.resInfo)
    ));
  }

  loadingGamesInfo.value.list = [];
  loadingGamesInfo.value.percent = 0;

  const resData = {
    total: 100,
    list: getGameList(12),
  };
  initLoadingData(resData);
}

function addMore() {
  if (loadingGamesInfo.value.list.length >= 100) return;
  const resData = {
    total: 100,
    list: [...loadingGamesInfo.value.list, ...getGameList(12)],
  };
  initLoadingData(resData);
}

function initLoadingData(resData: any) {
  loadingGamesInfo.value.loading = true;
  setTimeout(() => {
    loadingGamesInfo.value.list = resData.list || [];
    loadingGamesInfo.value.total = resData.total || 0;
    if (loadingGamesInfo.value.list.length >= loadingGamesInfo.value.total) {
      loadingGamesInfo.value.list = loadingGamesInfo.value.list.slice(
        0,
        loadingGamesInfo.value.total
      );
    }
    loadingGamesInfo.value.percent = Math.floor(
      (loadingGamesInfo.value.list.length / loadingGamesInfo.value.total) * 100
    );
    if (loadingGamesInfo.value.total === 0) {
      loadingGamesInfo.value.percent = 100;
    }
    loadingGamesInfo.value.loading = false;

    props.activeGameType.resInfo = JSON.parse(
      JSON.stringify(loadingGamesInfo.value)
    );
  }, 200);
}

defineExpose({
  initLoadingGames,
});
</script>

<style scoped lang="scss">
.home_game_gap {
  display: flex;
  flex-direction: column;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  gap: 0.3rem;
}

.game_loading {
  opacity: 0;
}

/* 淡入淡出动画 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
  opacity: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
